<template>
  <div id="ratings" ref="wrapper1">
    <div>
      <div class="top">
        <div class="top_left">
          <h1>4.5</h1>
          <p class="oneP">综合评分</p>
          <p class="twoP">高于周边商家69.2%</p>
        </div>
        <div class="top_right">
          <ul style="font-size: 0.3rem">
            <li>
              总体
              <van-rate
                v-model="valueOne"
                :size="20"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
              <span>{{ valueOne }}</span>
            </li>
            <li>
              口味
              <van-rate
                v-model="valueTwo"
                :size="20"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
              <span>{{ valueTwo }}</span>
            </li>
            <li>
              包装
              <van-rate
                v-model="valueThree"
                :size="20"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
              <span>{{ valueThree }}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- <div class="center"></div> -->
      <div class="content">
        <van-tabs type="card" color="green" style="margin: 0">
          <van-tab style="margin: 0; margin-top: 10px" title="全部">
            <div
              class="ratingsBox"
              v-for="(item, index) in ShopRatings"
              :key="index"
            >
              <img :src="item.avatar" alt="" />
              <div class="ratingsBox_right">
                <div
                  class="tit"
                  style="display: flex; justify-content: space-between"
                >
                  <p style="font-size: 0.4rem">{{ item.username }}</p>
                  <p style="font-size: 0.4rem">
                    {{ item.formattedDate }}
                    <!-- {{ new Date(item.rateTime) }} -->
                    <!-- {{ moment(item.rateTime).format("YYYY-MM-DD HH:mm:ss") }} -->
                  </p>
                </div>
                <van-rate
                  v-model="item.score"
                  :size="15"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
                /><span
                  style="margin-left: 5px; font-size: 0.3rem; opacity: 0.4"
                  >{{ item.deliveryTime }}分钟送达</span
                >
                <p style="font-size: 0.3rem; padding-bottom: 0.3rem">
                  {{ item.text }}
                </p>
              </div>
            </div>
          </van-tab>
          <van-tab title="满意">
            <div
              class="ratingsBox"
              v-for="(item, index) in goodShopRatings"
              :key="index"
            >
              <img :src="item.avatar" alt="" />
              <div class="ratingsBox_right">
                <div
                  class="tit"
                  style="display: flex; justify-content: space-between"
                >
                  <p style="font-size: 0.4rem">{{ item.username }}</p>
                  <p style="font-size: 0.4rem">
                    {{ item.formattedDate }}
                    <!-- {{ new Date(item.rateTime) }} -->
                    <!-- {{ moment(item.rateTime).format("YYYY-MM-DD HH:mm:ss") }} -->
                  </p>
                </div>
                <van-rate
                  v-model="item.score"
                  :size="15"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
                /><span
                  style="margin-left: 5px; font-size: 0.3rem; opacity: 0.4"
                  >{{ item.deliveryTime }}分钟送达</span
                >
                <p style="font-size: 0.3rem; padding-bottom: 0.3rem">
                  {{ item.text }}
                </p>
              </div>
            </div>
          </van-tab>
          <van-tab title="不满意">
            <div
              class="ratingsBox"
              v-for="(item, index) in badShopRatings"
              :key="index"
            >
              <img :src="item.avatar" alt="" />
              <div class="ratingsBox_right">
                <div
                  class="tit"
                  style="display: flex; justify-content: space-between"
                >
                  <p style="font-size: 0.4rem">{{ item.username }}</p>
                  <p style="font-size: 0.4rem">
                    {{ item.formattedDate }}
                    <!-- {{ new Date(item.rateTime) }} -->
                    <!-- {{ moment(item.rateTime).format("YYYY-MM-DD HH:mm:ss") }} -->
                  </p>
                </div>
                <van-rate
                  v-model="item.score"
                  :size="15"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
                /><span
                  style="margin-left: 5px; font-size: 0.3rem; opacity: 0.4"
                  >{{ item.deliveryTime }}分钟送达</span
                >
                <p style="font-size: 0.3rem; padding-bottom: 0.3rem">
                  {{ item.text }}
                </p>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import { fetchShopRaTings } from "../api/index";
import BScroll from "better-scroll";
// import moment from "moment";

export default {
  data() {
    return {
      ShopRatings: {},
      goodShopRatings: {},
      badShopRatings: {},
      valueOne: 4.5,
      valueTwo: 5,
      valueThree: 5,
    };
  },

  // 计算属性，用于声明依赖于data的值
  computed: {
    // 计算属性示例
  },

  // 侦听器，用于监听data中的数据变化
  watch: {
    // 侦听器示例
  },

  // 生命周期钩子
  // 组件的方法
  methods: {
    async fetchShopRaTings() {
      const res = await fetchShopRaTings();
      this.ShopRatings = res.data.map((rating) => ({
        ...rating,
        formattedDate: moment(rating.rateTime).format("YYYY-MM-DD HH:mm:ss"),
      }));
      this.goodShopRatings = res.data
        .filter((ele) => ele.score >= 3)
        .map((rating) => ({
          ...rating,
          formattedDate: moment(rating.rateTime).format("YYYY-MM-DD HH:mm:ss"),
        }));
      this.badShopRatings = res.data
        .filter((ele) => ele.score < 3)
        .map((rating) => ({
          ...rating,
          formattedDate: moment(rating.rateTime).format("YYYY-MM-DD HH:mm:ss"),
        }));
      this.$nextTick(() => {
        this.initScroll();
      });
    },
    initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper1, {
          click: true, // 允许点击事件
          scrollY: true, // 允许纵向滚动
          // 其他配置项...
        });
      } else {
        this.scroll.refresh(); // 如果已经初始化过，刷新滚动区域
      }
    },
  },
  mounted() {
    this.fetchShopRaTings();
  },
};
</script>
<style lang="less">
#ratings {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 75vh;
  overflow: hidden;
  .top {
    margin-top: 2px;
    border-top: 1px solid rgb(229, 228, 228);
    display: flex;
    width: 100%;
    height: 150px;
    padding: 0.1667rem;
    .top_left {
      width: 45%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-right: 3px solid rgb(229, 228, 228);
      h1 {
        color: rgb(255, 210, 30);
        font-size: 0.7rem;
        margin: 0;
      }
      .oneP {
        margin: 0;
        font-size: 0.5rem;
        font-weight: 700;
      }
      .twoP {
        font-size: 0.3rem;
        opacity: 0.6;
      }
    }
    .top_right {
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      // font-size: 0.4rem;
      font-weight: 600;
      span {
        color: rgb(255, 210, 30);
      }
    }
  }
  .center {
    width: 100%;
    height: 3%;
    background-color: rgb(243, 245, 247);
  }
  .content {
    width: 96%;
    height: auto;
    flex: 1;
    padding: 0 0.1rem;
    .ratingsBox {
      border-top: 1px solid;
      display: flex;
      justify-content: space-between;
      img {
        width: 15%;
        height: 15%;
        margin: 10px;
        border-radius: 50%;
      }
      .ratingsBox_right {
        flex: 1;
      }
    }
  }
}
.van-tabs__nav.van-tabs__nav--card {
  margin: 0;
}
</style>
